<template>
	<div class="main">
		<ul class="tab">
			<li @click="goto(1)">
				<span>单项</span>
			</li>
			<li @click="goto(2)">
				<span class="active">综合</span>
			</li>
			<li @click="goto(3)">
				<span>历史趋势分析</span>
			</li>
		</ul>
		<div class="wrap">
			<div class="syn">
				<div class="report" @click="toReport()">
					<img src="../../assets/images/icon_book.png">
					体质检测报告
					<i class="fa fa-angle-right"></i>
				</div>
				<van-circle
					v-model="bfb"
					:rate="bfb"
					:speed="300"
					color="#fff"
					layer-color="#A0D4FE"
					fill="#A0D4FE"
					size="2rem"
					:stroke-width="40"
					:text="`${bfb}分`"
					class="percent"/>
				<img src="../../assets/images/shadow.png" class="shadow">
				<div class="data">
					<div class="left">
						<h3>{{zonghe}}</h3>
						<p>综合分数</p>
					</div>
					<div class="middle"></div>
					<div class="right">
						<h3>{{rank}}</h3>
						<p>体质评估</p>
					</div>
				</div>
				<img src="../../assets/images/cloud.png" class="cloud">
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			bfb:50, //进度%
			zonghe:"", //综合
			rank:"", //体质评估
		}
	},
	methods:{
		list:function(){
			this.$axios.get('/physical/synthesize',{
				params:{
					studentUid:this.common.getCookie('studentUid'),
					annual:this.common.getCookie('year'),
				}
			})
			.then(res=>{
				if(res.data.code == 1){
					this.bfb = Number(res.data.data.score.toFixed(0)); //分数
					this.zonghe = res.data.data.zonghe; //综合
					this.rank = res.data.data.evaluate; //评估
				}
			})
		},
		//跳转
		goto:function(n){
			if(n == 1){
				this.$router.replace({path:"/single"});
			}
			else if(n == 2){

			}
			else if(n == 3){
				this.$router.replace({path:"/history"});
			}
		},
		//跳到报告
		toReport:function(){
			this.$router.replace({path:"/report"});
		}
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		document.title = "体质数据";
	}
}
</script>

<style lang="scss" scoped>
	.contentbox {
		width: 300px;
		height: 300px;
	}
	.wrap{
		background-color: #fff;
		padding: 10px;
		margin-top: 10px;
		.syn{
			position: relative;
			height: calc(100vh - 81px);
			background: linear-gradient(#1597FB, #8FF0FF);
			border-radius: 12px;
			box-shadow: 0 0 10px #ccc;
			.report{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #fff;
				padding: 15px 20px 0 0;
				img{
					display: inline;
					height: 20px;
					margin-right: 4px;
				}
				i{
					margin-left: 4px;
				}
			}
			.percent{
				width: 2rem;
				position: absolute;
				left: 50%;
				top: 1rem;
				margin-left: -1rem;
			}
			.shadow{
				position: absolute;
				width: 100px;
				left: 50%;
				margin-left: -50px;
				top: 3.1rem;
			}
			.data{
				display: flex;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 1rem;
				.left{
					width: 49%;
					text-align: center;
					color: #fff;
					font-size: 15px;
					h3{
						padding-bottom: 6px;
					}
				}
				.middle{
					height: 44px;
					width: 1px;
					background-color: #fff;
				}
				.right{
					width: 49%;
					text-align: center;
					color: #fff;
					font-size: 15px;
					h3{
						padding-bottom: 6px;
					}
				}
			}
			.cloud{
				width: 100%;
				height: 0.7rem;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
	}
</style>
